<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <LikeDog
      v-for="(item, index) in list"
      :key="index"
      :obj="item"
      @like="lkdog"
    >
    </LikeDog>
    <br />
    <div class="box">
      <span>您喜欢的狗如下:</span>
      <ul>
        <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
      </ul>
    </div>
    <hr />
    <table>
      <LianXiTwo
        v-for="(item, index) in goodsArr"
        :key="index"
        :obj="item"
        @add="item.count = $event - 0"
      ></LianXiTwo>
    </table>

    <hr />
    <h3>商品清单如下</h3>
    <ul>
      <li v-for="(item, index) in foodList" :key="index">
        {{ item.shopName }} {{ item.price }}
        元/份
      </li>
    </ul>
    <LianXiThree
      v-for="(item, index) in foodList"
      :key="index"
      :obj="item"
      @chang-num="item.count = $event"
    ></LianXiThree>
    <p>总价为:{{ price }}</p>

    <hr />
    <h3>测试题</h3>
    <MySubject
      v-for="(item, index) in arr"
      :key="index"
      :obj="item"
      @tijiao="item.result = $event"
    ></MySubject>
    <div>
      <MyFlag
        v-for="(item, index) in arr"
        :key="index"
        :obj="item"
        :index="index"
      ></MyFlag>
    </div>
  </div>
</template>

<script>
import MyFlag from "./components/MyFlag.vue";
import MySubject from "./components/MySubject.vue";
import LianXiThree from "./components/LianXiThree.vue";
import LianXiTwo from "./components/LianXiTwo.vue";
import LikeDog from "./components/LikeDog.vue";
export default {
  data() {
    return {
      list: [
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=3986290699,1187978817&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=1857899987,850223025&fm=253&fmt=auto&app=138&f=JPEG?w=398&h=600",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "	https://img0.baidu.com/it/u=785702198,2527104588&fm=253&fmt=auto&app=138&f=JPEG?w=270&h=270",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2372374543,612363602&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          dogName: "萨摩耶",
        },
      ],
      arr: [],
      goodsArr: [
        {
          count: 0,
          goodsName: "Watermelon",
        },
        {
          count: 0,
          goodsName: "Banana",
        },
        {
          count: 0,
          goodsName: "Orange",
        },
        {
          count: 0,
          goodsName: "Pineapple",
        },
        {
          count: 0,
          goodsName: "Strawberry",
        },
      ],
      foodList: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  components: {
    LikeDog,
    LianXiTwo,
    LianXiThree,
    MyFlag,
    MySubject,
  },
  created() {
    const arr = [];
    for (let i = 0; i < 5; i++) {
      const left = Math.floor(Math.random() * 11);
      const right = Math.floor(Math.random() * 11);
      arr.push({ left, right, result: "" });
    }
    this.arr = arr;
  },
  computed: {
    total() {
      return this.goodsArr.reduce((sum, item) => sum + item.count, 0);
    },
  },
  methods: {
    lkdog(name) {
      this.arr.push(name);
    },
    price() {
      return this.foodList.reduce(
        (sum, item) => sum + item.count * this.price,
      );
    },
  },
};
</script>

<style scoped lang="less"></style>
